<template>
  <div class="time-format-test">
    <n-card title="时间格式化测试" :bordered="false" size="small" class="h-full shadow-sm rounded-8px">
      <n-space vertical size="large">
        <!-- 测试数据 -->
        <n-card title="测试数据" size="small">
          <n-space vertical>
            <div>
              <strong>ISO格式时间：</strong>
              <n-code>{{ isoTime }}</n-code>
            </div>
            <div>
              <strong>正确格式时间：</strong>
              <n-code>{{ correctTime }}</n-code>
            </div>
            <div>
              <strong>当前时间：</strong>
              <n-code>{{ currentTime }}</n-code>
            </div>
          </n-space>
        </n-card>

        <!-- 格式化结果 -->
        <n-card title="格式化结果" size="small">
          <n-table :bordered="false" :single-line="false">
            <thead>
              <tr>
                <th>原始时间</th>
                <th>格式化结果</th>
                <th>函数</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><n-code>{{ isoTime }}</n-code></td>
                <td><strong>{{ formatTime(isoTime) }}</strong></td>
                <td>formatTime()</td>
              </tr>
              <tr>
                <td><n-code>{{ correctTime }}</n-code></td>
                <td><strong>{{ formatTime(correctTime) }}</strong></td>
                <td>formatTime()</td>
              </tr>
              <tr>
                <td><n-code>{{ currentTime }}</n-code></td>
                <td><strong>{{ formatTime(currentTime) }}</strong></td>
                <td>formatTime()</td>
              </tr>
              <tr>
                <td><n-code>null</n-code></td>
                <td><strong>{{ formatTime(null) }}</strong></td>
                <td>formatTime()</td>
              </tr>
              <tr>
                <td><n-code>{{ isoTime }}</n-code></td>
                <td><strong>{{ formatDate(isoTime) }}</strong></td>
                <td>formatDate()</td>
              </tr>
              <tr>
                <td><n-code>{{ isoTime }}</n-code></td>
                <td><strong>{{ formatTimeOnly(isoTime) }}</strong></td>
                <td>formatTimeOnly()</td>
              </tr>
              <tr>
                <td><n-code>{{ isoTime }}</n-code></td>
                <td><strong>{{ formatDateTime(isoTime) }}</strong></td>
                <td>formatDateTime()</td>
              </tr>
              <tr>
                <td><n-code>{{ pastTime }}</n-code></td>
                <td><strong>{{ getRelativeTime(pastTime) }}</strong></td>
                <td>getRelativeTime()</td>
              </tr>
            </tbody>
          </n-table>
        </n-card>

        <!-- 检测结果 -->
        <n-card title="格式检测" size="small">
          <n-space vertical>
            <div>
              <n-tag :type="isISOTimeString(isoTime) ? 'success' : 'error'">
                {{ isoTime }} - {{ isISOTimeString(isoTime) ? 'ISO格式' : '非ISO格式' }}
              </n-tag>
            </div>
            <div>
              <n-tag :type="isISOTimeString(correctTime) ? 'success' : 'error'">
                {{ correctTime }} - {{ isISOTimeString(correctTime) ? 'ISO格式' : '非ISO格式' }}
              </n-tag>
            </div>
          </n-space>
        </n-card>

        <!-- 自定义测试 -->
        <n-card title="自定义测试" size="small">
          <n-space vertical>
            <n-input
              v-model:value="customTime"
              placeholder="输入时间字符串进行测试"
            />
            <div v-if="customTime">
              <strong>格式化结果：</strong>
              <n-tag type="info">{{ formatTime(customTime) }}</n-tag>
            </div>
          </n-space>
        </n-card>

        <!-- 说明 -->
        <n-card title="说明" size="small">
          <n-alert type="info" :show-icon="false">
            <ul>
              <li><strong>正确格式：</strong>2024-01-01 09:00:00</li>
              <li><strong>错误格式：</strong>2025-07-24T08:54:46.000Z</li>
              <li><strong>formatTime()：</strong>完整的日期时间格式</li>
              <li><strong>formatDate()：</strong>仅日期格式</li>
              <li><strong>formatTimeOnly()：</strong>仅时间格式</li>
              <li><strong>formatDateTime()：</strong>日期时间格式（精确到分钟）</li>
              <li><strong>getRelativeTime()：</strong>相对时间描述</li>
            </ul>
          </n-alert>
        </n-card>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatTime, formatDate, formatTimeOnly, formatDateTime, getRelativeTime, isISOTimeString } from '@/utils/time'

// 测试数据
const isoTime = '2025-07-24T08:54:46.000Z'
const correctTime = '2024-01-01 09:00:00'
const currentTime = new Date().toISOString()
const pastTime = new Date(Date.now() - 1000 * 60 * 30).toISOString() // 30分钟前

// 自定义测试
const customTime = ref('')
</script>

<style scoped>
.time-format-test {
  padding: 20px;
}

.n-table th,
.n-table td {
  padding: 8px 12px;
}

.n-table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

.n-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

ul {
  margin: 0;
  padding-left: 20px;
}

li {
  margin-bottom: 4px;
}
</style>
